<template>
    <h3>{{ pList.title }}</h3>
    <div id="section">
        <!-- template-start -->
        <bSearch :instance="mSearch">
            <el-button @click="() => mSearch.onSearch()" type="primary">搜索</el-button>
        </bSearch>
        <div class="blank"></div>
        <bTable :instance="pList"></bTable>
        <el-dialog v-model="dForm._show" :title="dForm.title" :destroyOnClose="true">
            <bForm :instance="dForm" cover="50%">
                <el-button @click="onUpdate">完成</el-button>
            </bForm>
        </el-dialog>
        <!-- template-end -->
    </div>
</template>

<script setup lang="ts">
import { IList, IForm, IListSearch } from "@b/index/department";
import bTable from "@/components/public/b_table.vue";
import bSearch from "@/components/public/b_search.vue";
import bForm from "@/components/public/b_form.vue";
import { ElDialog, ElButton } from "element-plus";
/* import-and-register */

const mSearch = new IListSearch();
const pList = new IList();
const dForm = new IForm();
/* const-and-register */

dForm.init();
mSearch.init();

mSearch.onSearch = () => {
    //解构（浅拷贝，防止存在查询条件时点击页码产生的混乱）
    pList.search_key = mSearch.getData();
    pList.refresh(1);
};

pList.edit = async (id: number) => {
    if (!id) return;
    dForm._show = true;
    dForm.id = id;
    dForm.title = "修改区域列表信息";
    await dForm.setData();
};
pList.add = async () => {
    dForm._show = true;
    dForm.title = "添加部门";
};
const onUpdate = async () => {
    const res = await dForm.updateData();
    if (res) {
        dForm._show = false;
        pList.refresh();
    }
};
/* event-and-register */
</script>

<style scoped>
#section :deep(.el-dialog) {
    width: 90%;
    max-width: 780px;
    min-width: 252px;
}

/* style-and-register */
</style>